<template>
  <div class="tableContainer">
    <table>
      <thead>
        <tr>
          <th>上报单位</th>
          <th>是否上报</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in tableData" :key="index">
          <td>{{item.units}}</td>
          <td>{{item.report}}</td>
          <td>
            <a href="javascript:;" class="lookOver" @click="lookFun(item)">查看</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          units: '第一大队',
          report: '是',
        },
        {
          units: '第一大队',
          report: '是',
        },
        {
          units: '第一大队',
          report: '是',
        },
        {
          units: '第一大队',
          report: '是',
        },
        {
          units: '第一大队',
          report: '是',
        },
        {
          units: '第一大队',
          report: '是',
        },
        {
          units: '第一大队',
          report: '是',
        },
      ]
    }
  },
  methods: {
    // 点击时事件
    lookFun(val) {
      console.log(val);
    }
  }
}
</script>

<style lang='less'>
  .tableContainer{
    width: 100%;
    table{
      width: 100%;
      border-spacing: 0 2px;
      border-collapse: separate;
      tr{
        box-shadow: 0 1px 1px 1px #ccc;
        border-radius: 5px;
        height: 40px;
        &:hover{
          background-color: #eee;
        }
        th,td{
          width: calc(100% / 3);
          text-align: center;
          height: 36px;
          line-height: 36px;
          .lookOver {
            padding-left: 20px;
            background: url('../../../assets/images/icon_chakan.png') no-repeat left center;
          }
        }
      }
    }
  }
</style>